<template>
  <div class="buyticket">
    <h3>2020年9月26日-11月22日展期票</h3>
    <label for="doublepeople" @click="chose1" class="first" :style=" check1 ? 'border: 3px solid rgb(212, 85, 12);color:rgb(212, 85, 12);' : ''">
      <input type="radio" id="doublepeople" name="buyticket" :checked="check1" ref="first">
      <div class="card">
        <div class="msg">
          <h2>双人票 | 展期通用 <span>{{ setTicketList.discountRate }}折</span></h2>
          <p>双人票{{ setTicketList.totalPrice }}元，展期通用，一人一票持票入场，每张票单次入场使用有效，不可重复入场。</p>
        </div>
        <div class="price">
          <p><span>{{ setTicketList.totalPrice }}</span>元 <del>{{ (setTicketList.totalPrice / setTicketList.discountRate *10).toFixed(2) }}元</del></p>
        </div>
      </div>
    </label>
    <label for="one" @click="chose2" :style=" check2 ? 'border: 3px solid rgb(212, 85, 12);color:rgb(212, 85, 12);' : ''">
      <input type="radio" id="one" name="buyticket">
      <div class="card">
        <div class="msg">
          <h2>单人票 | 展期通用</h2>
          <p>单人票{{ setTicketList.ticketPrice }}元/人，展期通用，一人一票持票入场，每张票单次入场使用有效，不可重复入场。</p>
        </div>
        <div class="price">
          <p><span>{{ setTicketList.ticketPrice }}</span> 元</p>
        </div>
      </div>
    </label>
    <h3>2020年9月26日-11月22日优待票</h3>
    <label for="free" @click="chose3" :style=" check3 ? 'border: 3px solid rgb(212, 85, 12);color:rgb(212, 85, 12);' : ''">
      <input type="radio" id="free" name="buyticket">
      <div class="card">
        <div class="msg">
          <h2>优待票 | 展期通用</h2>
          <p>医务工作者、学生、60周岁（含）以上老人、残疾人以及军人凭相关证件享受优待票价，入场时需出示相关证件.</p>
        </div>
        <div class="price">
          <p><span>{{ setTicketList.lowestPrice }}</span> 元</p>
        </div>
      </div>
    </label>
    <div class="settlement">
      <div class="title">
        <h2>数量 <br><i>每单限购6份</i></h2>
        <van-stepper :value="value" @plus="addValue" @minus="reduceValue"/>
      </div>
      <div class="total">
        <p>总计：<span>{{ total }}元</span></p>
        <p @click="toPayFor(total)">确认选票</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      check1: true,
      check2: false,
      check3: false,
      value: 1,
      id: '',
      setTicketList: {},
      total: 0
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getShowTicketData(this.id).then(resp => {
      if (!this.setTicketList.discountRate) {
        this.setTicketList.discountRate = '8.0'
        this.setTicketList.totalPrice = '108'
        this.setTicketList.ticketPrice = '68'
        this.setTicketList.lowestPrice = '48'
      }
      // console.log(this.setTicketList)
      if (resp.data.data.promotional.setTicketList) {
        this.setTicketList = resp.data.data.promotional.setTicketList[0]
        this.setTicketList.lowestPrice = resp.data.data.lowestPrice
      }

      this.totalPrice()
    })
  },
  methods: {
    ...mapMutations(['getTotalMoney']),
    chose1 () {
      this.check1 = true
      this.check2 = false
      this.check3 = false
      this.totalPrice()
    },
    chose2 () {
      this.check1 = false
      this.check2 = true
      this.check3 = false
      this.totalPrice()
    },
    chose3 () {
      this.check1 = false
      this.check2 = false
      this.check3 = true
      this.totalPrice()
    },
    totalPrice () {
      if (this.check1) {
        this.total = this.setTicketList.totalPrice * this.value
      }
      if (this.check2) {
        this.total = this.setTicketList.ticketPrice * this.value
      }
      if (this.check3) {
        this.total = this.setTicketList.lowestPrice * this.value
      }
    },
    addValue () {
      this.value++
      this.totalPrice()
    },
    reduceValue () {
      this.value--
      this.totalPrice()
    },
    toPayFor (total) {
      this.getTotalMoney({ total })
      this.$router.push('/payfor')
    }
  }
}
</script>
<style lang="scss" scoped>
.buyticket{
  position: relative;
  padding: 0 10px;
  overflow: hidden;
  height: 100%;
  background-color: #eeeeee;
  h2{
    font-size: 18px;
    font-weight: bold;
    span{
      background-color: rgb(212, 85, 12);
      color: #fff;
      font-size: 12px;
      display: inline-block;
      text-align: center;
      width: 36px;
      height: 14px;
      border-radius: 5px;
      line-height: 14px;
    }
  }
  h3{
    font-size: 16px;
    font-weight: bold;
    color: rgb(194, 189, 189);
    line-height: 30px;
    margin-top: 10px;
  }
  p{
    font-size: 14px;
    margin-top: 10px;
    line-height: 20px;
  }
}
label{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  box-sizing: border-box;
  position: relative;
  height: 124px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #eee;
  background-color: #fff;
}
.card{
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .msg{
    width: 60%;
  }
  .price{
    p{
      font-size: 14px;
      font-weight: normal;
      span{
        font-size: 18px;
        font-weight: bold;
      }
      del{
        font-size: 12px;
      }
    }
  }
}
.settlement{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120px;
  background-color: #fff;
  .title{
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    padding:0 20px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-bottom: 1px solid #ededed;
    h2{
      i{
        font-size: 12px;
        color:#999;
        font-weight:normal;
        font-style: normal;
      }
    }
  }
  .total{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p:nth-of-type(1){
      width:100px;
      height: 100%;
      line-height: 60px;
      text-align:center;
      span{
        color: rgb(212, 85, 12);
        font-size: 18px;
        font-weight: bold;
      }
    }
    p:nth-of-type(2){
      width: 120px;
      height: 100%;
      background-color: rgb(212, 85, 12);
      text-align: center;
      /* border-radius: 10px; */
      line-height: 60px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }
}
</style>
